<template>
  <div class="out_div">
    <transition name="fade-transform" mode="out-in">
      <div v-if="currentMode === currentModeList.LIST" class="baseList">
        <el-form class="searchForm" ref="roleSearchForm" size="small" :model="roleSearchForm">
          <el-row :gutter="5">
            <el-col :span="6">
              <el-form-item prop="name" label="角色名:">
                <el-input clearable placeholder="请输入角色名" v-model="roleSearchForm.name" name="name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button icon="el-icon-search" type="primary" size="mini" @click="searchRoleHandler">查询 </el-button>
              <el-button icon="el-icon-refresh-right" type="info" size="mini" @click="resetRoleHandler">重置 </el-button>
            </el-col>
          </el-row>
        </el-form>
        <toolbar @on-add="addRoleHandler" :privileges="btnPrivileges" :keys="['add']" />

        <paginatable
          :keys="['edit', 'del']"
          :privileges="btnPrivileges"
          v-loading="roleTblOpts.loading"
          @row-edit="editRoleHandler"
          @row-del="delRoleHandler"
          @on-pagination="paginationRoleHandler"
          :tblOpts="roleTblOpts"
        />
      </div>
    </transition>
    <transition name="fade-transform" mode="out-in">
      <el-container v-if="currentMode === currentModeList.EDIT" class="baseEdit">
        <el-header style="height: 35px;padding: 0">
          <el-row>
            <el-col :span="12">
              <el-page-header @back="backHandler" content="详情页面"> </el-page-header>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-form v-loading="formLoading" class="editForm" size="small" label-width="90px" :model="roleEditForm" ref="roleEditForm">
            <el-form-item class="hidden" prop="id">
              <el-input v-model="roleEditForm.id" type="hidden" />
            </el-form-item>
            <el-row :gutter="5">
              <el-col :span="10">
                <el-form-item label="角色名:" prop="menuName">
                  <el-input clearable style="width: 100%" v-model="roleEditForm.name" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="10">
                <el-form-item label="角色CODE:" prop="code">
                  <el-input clearable style="width: 100%" v-model="roleEditForm.code" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="5">
              <el-col :span="10">
                <el-form-item label="备注:" prop="remark">
                  <el-input clearable style="width: 100%" v-model="roleEditForm.remark" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">权限信息</el-divider>
            <el-tree :data="roleMenuData" node-key="id" ref="menuTree" show-checkbox />
          </el-form>
        </el-main>
        <el-footer>
          <toolbar @on-save="saveRoleHandler" :privileges="btnPrivileges" :keys="['save']" />
        </el-footer>
      </el-container>
    </transition>
  </div>
</template>
<style scoped></style>
<script>
import paginatable from '@/components/paginatable'
import toolbar from '@/components/toolbar'
import * as tools from '@/utils/tools'
import * as roleApi from '@/api/sys/role'
import * as menuApi from '@/api/sys/menu'

export default {
  name: 'role',
  data() {
    return {
      roleMenuData: [],
      currentModeList: this.$config.currentShow,
      currentMode: this.$config.currentShow.LIST,
      formLoading: false,
      roleSearchForm: {
        name: ''
      },
      roleEditForm: {
        id: '',
        name: '',
        status: '',
        remark: '',
        accountId: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        enabled: '',
        updateTime: ''
      },
      roleTblOpts: {
        fitCols: true,
        loading: false,
        cols: [
          {
            prop: 'name',
            label: '角色名'
          },
          {
            prop: 'code',
            label: '角色CODE'
          },
          {
            prop: 'remark',
            label: '备注'
          }
        ],
        data: [],
        selection: []
      },
      btnPrivileges: [],
      searchRoleConditions: []
    }
  },
  components: {
    paginatable,
    toolbar
  },
  methods: {
    resetRoleHandler() {
      this.$refs.roleSearchForm.resetFields()
    },
    clearEdit() {
      if (this.$refs.roleEditForm) {
        this.$refs.roleEditForm.resetFields()
      }
    },
    backHandler() {
      this.formLoading = false
      this.currentMode = this.$config.currentShow.LIST
      this.clearEdit()
      this.paginationRoleHandler()
    },
    async saveRoleHandler() {
      //  获取全选和半选的
      let checkedMenuIds = this.$refs.menuTree.getCheckedKeys()
      let halfCheckedMenuIds = this.$refs.menuTree.getHalfCheckedKeys()
      checkedMenuIds = checkedMenuIds.concat(halfCheckedMenuIds)
      let valid = await this.$refs.roleEditForm.validate()
      if (valid) {
        this.formLoading = true
        this.roleEditForm.checkedMenuIds = checkedMenuIds
        roleApi
          .save(this.roleEditForm)
          .then(resp => {
            this.formLoading = true
            tools.notify({
              type: 'success',
              message: '保存成功'
            })
            this.backHandler()
          })
          .catch(resp => {
            this.formLoading = true
          })
      } else {
        tools.notify({
          type: 'warning',
          message: '请按要求填写'
        })
      }
    },
    delRoleHandler(row) {
      this.$confirm('确定要删除这条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          roleApi.del(row.id).then(resp => {
            this.paginationRoleHandler(this.roleTblOpts.pageNo)
            tools.notify({
              type: 'success',
              message: '删除成功'
            })
          })
        })
        .catch(() => {})
    },
    addRoleHandler() {
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
    },
    async editRoleHandler(row) {
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
      let resp = await roleApi.load(row.id)
      this.roleEditForm = resp.data
      let menuSelect = await roleApi.loadByRoleId(row.id)
      this.$refs.menuTree.setCheckedKeys(menuSelect.data)
    },
    paginationRoleHandler(pageNo) {
      this.$set(this.roleTblOpts, 'pageNo', pageNo || 1)
      this.roleTblOpts.loading = true
      roleApi.pagination(this.roleTblOpts, this.searchRoleConditions).then(resp => {
        this.roleTblOpts.data = resp.data.records
        Object.assign(this.roleTblOpts, { total: Number(resp.data.total) })
        this.roleTblOpts.loading = false
      })
    },
    searchRoleHandler() {
      this.searchRoleConditions = []
      if (this.roleSearchForm.name) {
        let val = this.roleSearchForm.name
        this.searchRoleConditions.push({
          field: 'name',
          operator: 'like',
          values: val instanceof Array ? [...val] : [val]
        })
      }
      this.paginationRoleHandler(this.roleTblOpts.pageNo)
    },
    getMenuTreeHandler() {
      roleApi.getMenuTree().then(res => {
        this.roleMenuData = res.data
      })
    }
  },
  mounted() {
    let menuId = this.$route.meta.id
    menuApi.getMenuBtn(menuId).then(resp => {
      this.btnPrivileges = resp.data
    })
    this.paginationRoleHandler()
    this.getMenuTreeHandler()
  }
}
</script>
